<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src='lib/babel.min.js'></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    root.render(<h3>正在拼命加载中...</h3>);
    fetch("https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=4817299",{
        headers:{
            "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1761639069258599980892161"}',
            "X-Host": "mall.film-ticket.film.list"
        }
    }).then(response=>{
        return response.json();
    }).then(value=>{
        root.render((
            <div>
                {
                    value.data.films.map(item=>{
                        return (
                            <div key={item.filmId}>
                                <h3>{item.name}</h3>
                                <img style={{width:300}} src={item.poster}/>
                            </div>
                        )
                    })
                }
            </div>
        ))
    })
</script>
</html>